<template>
  <div>
    <!-- 通告区 -->
    <!-- <el-carousel height="80px" direction="vertical" :autoplay="true">
            <el-carousel-item v-for="item in 3" :key="item">
                <div class="medium">{{ item }}</div>
            </el-carousel-item>
        </el-carousel> -->
    <el-row :gutter="12" class="margintop stats-cont">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="title usertoTalColor" id="">
            <h1>{{ totalUser }}</h1>
            <p class="title_style">
              <i class="el-icon-user-solid"></i>用户总量
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="title houseTalColor" id="">
            <h1>{{ totalHouse }}</h1>
            <p class="title_style"><i class="el-icon-s-home"></i>房屋总量</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="title NoReplyMessageColor" id="">
            <h1>{{ NewtotalMoney }}W</h1>
            <p class="title_style"><i class="el-icon-medal-1"></i>总销量</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="title" id="">
            <h1>{{ totalMemory }}MB</h1>
            <p class="title_style"><i class="el-icon-s-data"></i>CPU剩余内存</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 信息显示区 -->
    <el-row :gutter="24" class="margintop">
      <el-col :span="12">
        <el-card shadow="hover">
          <h1 class="title">历年房屋销售量</h1>
          <div id="DatasetInObjectArray"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <h1 class="title">各地段房屋销量</h1>
          <div id="DoughnutChartwithRoundedCorner"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="margintop">
      <el-col :span="24">
        <el-card shadow="hover">
          <h1 class="title">本周房屋销售量</h1>
          <div id="LineRace"></div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 最新评论与消息 -->
    <el-row :gutter="24" class="margintop">
      <el-col :span="16">
        <el-card shadow="hover">
          <h1 class="title">最新评论</h1>
          <div>
            <!-- 用户列表区 -->
            <el-table :data="currentPageData" stripe>
              <el-table-column label="#" type="index"></el-table-column>
              <el-table-column label="时间" prop="date"></el-table-column>
              <el-table-column
                label="用户名"
                prop="commentUsers"
              ></el-table-column>
              <el-table-column label="内容" prop="content"></el-table-column>
              <el-table-column label="点赞">
                <template slot-scope="scope">
                  <el-rate
                    v-model="
                      nice[
                        scope.$index +
                          (queryInfo.pageNum - 1) * queryInfo.pageSize
                      ]
                    "
                    disabled
                    show-score
                    text-color="#ff9900"
                  >
                  </el-rate>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <h1 class="title">最热房屋</h1>
          <div id="hotHouseImg">
            <div class="block">
              <el-carousel>
                <el-carousel-item v-for="(item, i) in HotHouse" :key="i">
                  <img :src="item" alt="" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="margintop">
      <el-col :span="24">
        <el-calendar v-model="value"> </el-calendar>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts/core";
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { BarChart, PieChart, LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  LegendComponent,
  BarChart,
  PieChart,
  CanvasRenderer,
]);

var app = {};

export default {
  data() {
    return {
      optionNumOne: {
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ["product", "2015", "2016", "2017"],
          source: [
            { product: "Matcha Latte", 2015: 43.3, 2016: 85.8, 2017: 93.7 },
            { product: "Milk Tea", 2015: 83.1, 2016: 73.4, 2017: 55.1 },
            { product: "Cheese Cocoa", 2015: 86.4, 2016: 65.2, 2017: 82.5 },
            { product: "Walnut Brownie", 2015: 72.4, 2016: 53.9, 2017: 39.1 },
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      },
      optionNumTwo: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" },
            ],
          },
        ],
      },
      optionNumThree: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "line",
            symbol: "triangle",
            symbolSize: 20,
            lineStyle: {
              color: "#5470C6",
              width: 4,
              type: "dashed",
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: "#EE6666",
              color: "yellow",
            },
          },
        ],
      },
      totalUser: 0,
      totalHouse: 0,
      totalMemory: 0,
      totalMoney: 0,
      NewtotalMoney: 0,
      totalPrice: [],
      totalArea: [],
      univalent: [],
      queryInfo: {
        query: "",
        pageNum: 1, // 当前页数，默认为1
        pageSize: 5, // 每页显示数量
      },
      CommentList: [], //所有数据
      currentPageData: [], //当前页显示内容
      FuzzyQuery: null,
      addDialogVisible: false, //控制添加信息出现于隐藏
      updateDialogVisible: false, //控制修改信息出现于隐藏
      userID: "",
      nice: [],
      HotHouse: [],
      value: new Date(),
    };
  },
  created() {
    this.getUserList();
    this.getHouseList();
    this.getRemainingMemory();
    this.getCommentList();
    this.getpicture();
    this.getMoney();
  },
  mounted() {
    this.echartsDatasetInObjectArray();
    this.echartsDoughnutChartwithRoundedCorner();
    this.echartsLineRace();
  },
  methods: {
    echartsDatasetInObjectArray() {
      var chartDomDatasetInObjectArray = document.getElementById(
        "DatasetInObjectArray"
      );
      var myChartNumOne = echarts.init(chartDomDatasetInObjectArray);
      this.optionNumOne && myChartNumOne.setOption(this.optionNumOne);
    },
    echartsDoughnutChartwithRoundedCorner() {
      var chartDomDoughnutChartwithRoundedCorner = document.getElementById(
        "DoughnutChartwithRoundedCorner"
      );
      var myChartNumTwo = echarts.init(chartDomDoughnutChartwithRoundedCorner);
      this.optionNumTwo && myChartNumTwo.setOption(this.optionNumTwo);
    },
    echartsLineRace() {
      var chartDomLineRace = document.getElementById("LineRace");
      var myChartNumThree = echarts.init(chartDomLineRace);
      this.optionNumThree && myChartNumThree.setOption(this.optionNumThree);
    },
    async getUserList() {
      const _this = this;
      const { data: result } = await this.$http.get("UserList", {
        params: this.queryInfo,
      });
      this.userList = result.data;
      let timer = setInterval(() => {
        _this.totalUser++;
        if (_this.totalUser == _this.userList.length) {
          _this.totalUser = _this.userList.length;
          clearInterval(timer);
        }
      }, 100);
    },
    async getHouseList() {
      const _this = this;
      const { data: result } = await this.$http.get("HouseList", {
        params: this.queryInfo,
      });
      this.houseList = result.data;
      let timer = setInterval(() => {
        _this.totalHouse++;
        if (_this.totalHouse == _this.houseList.length) {
          _this.totalHouse = _this.houseList.length;
          clearInterval(timer);
        }
      }, 100);
    },
    async getpicture() {
      const { data: result } = await this.$http.get("HouseList", {
        params: this.queryInfo,
      });
      this.houseList = result.data;
      let newArr = this.houseList.map((item) => item.picture);
      for (let i = 0; i < newArr.length; i++) {
        this.HotHouse.push(newArr[i]);
      }
      this.HotHouse = this.HotHouse.splice(0, 4);
    },
    async getRemainingMemory() {
      const _this = this;
      const { data: result } = await this.$http.get(
        "getCPU",
        this.RemainingMemory
      );
      this.RemainingMemory = result.data.valueCPU;
      let timer = setInterval(() => {
        _this.totalMemory++;
        if (_this.totalMemory == _this.RemainingMemory) {
          _this.totalMemory == _this.RemainingMemory;
          clearInterval(timer);
        }
      });
    },
    async getCommentList() {
      const { data: result } = await this.$http.get("CommentList", {
        params: this.queryInfo,
      });
      this.CommentList = result.data;
      this.currentPageData = result.data.splice(0, 5);
      let newArr = this.currentPageData.map((item) => item.nice);
      for (let i = 0; i < newArr.length; i++) {
        this.nice.push(Number(newArr[i]));
      }
    },
    async getMoney() {
      const _this = this;
      const { data: result } = await this.$http.get("SellList", {
        params: this.queryInfo,
      });
      for (let i = 0; i < result.data.length; i++) {
        this.totalPrice.push(result.data[i].price);
        this.totalArea.push(result.data[i].area);
      }
      for (
        let j = 0, k = 0;
        j < this.totalPrice.length, k < this.totalArea.length;
        j++, k++
      ) {
        this.univalent.push(this.totalPrice[j] * this.totalArea[k]);
        this.totalMoney += this.univalent[j];
      }

      let timer = setInterval(() => {
        console.log(_this.totalMoney);
        _this.NewtotalMoney++;
        if (_this.NewtotalMoney >= _this.totalMoney) {
          _this.NewtotalMoney == _this.totalMoney;
          clearInterval(timer);
        }
      });
    },
  },
};
</script>
<style scoped>
.el-carousel {
  margin: 0;
}
.el-carousel__item div {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 80px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
#DatasetInObjectArray {
  margin-left: 15%;
  width: 400px;
  height: 300px;
}
#DoughnutChartwithRoundedCorner {
  margin-left: 15%;
  width: 400px;
  height: 300px;
}
#LineRace {
  margin-left: 4%;
  height: 300px;
}
.margintop {
  margin-top: 1%;
}
.title {
  text-align: center;
}
.title_style {
  font-weight: bold;
  font-size: 20px;
}
.usertoTalColor {
  color: rgb(236, 155, 33);
}
.houseTalColor {
  color: rgb(31, 99, 46);
}
.NoReplyMessageColor {
  color: rgb(48, 39, 102);
}
.AnnouncementColor {
  color: rgb(177, 41, 41);
}
#hotHouseImg img {
  width: 100%;
  height: 100%;
}
</style>